{extend name="./app/admin/view/main.html" /}
{block name="title"}文章{if condition='$id'}编辑{else/}发布{/if} - {__block__}{/block}

{block name="style"}
<style>
    .img-main-pic-img {
        max-height: 100px;
    }

    .div-main-pic {
        height: 160px;
    }

    .simditor-body {
        overflow-y: auto;
    }

    .tags-btn:hover {
        background-color: #dddee1;
    }

    .ivu-select-group-title {
        padding-left: 15px;
    }

    .ivu-select-group .ivu-select-item {
        padding-left: 30px;
    }
</style>
{/block}

{block name="main"}
<header class="mipcms-container-header">
    <div class="float-left header-group">
        <h4 class="title">文章伪原创</h4>
    </div>
</header>

<main class="mipcms-container-body" style="height: calc(100% - 50px)">
    <section class="">
        <section class="mip-box">
            <section class="mip-box-body">
                <div>
                    <i-select v-model.sync="currlang" style="width:100px" on-change="chglang()">
                        <i-option v-for="item in langs" :value="item.value">{{ item.label }}</i-option>
                    </i-select>
                    <i-Button type="success" @click='itemSearchClick'>生成伪原创</i-Button>
                    <i-Button type="success" @click='clearContent'>清除内容</i-Button>

                </div>
                <div>
                <i-input id="txt1" v-model="article" type="textarea" style="width: 49%"
                         rows="30" placeholder="请输入原文章内容" ></i-input>

                <i-input id="txt2" v-model="reword_article" style="width: 49%;overflow-y: hidden" type="textarea"
                         rows="30"></i-input>
                </div>
            </section>
        </section>
    </section>

</main>
{/block}

{block name="javascript"}
{__block__}
<script>
    new Vue({
        el: '#app',
        data: {
            vShow: '',
            spinShow: true,
            langs:[
                {'label':'仿美国人','value':'en'},
                {'label':'仿日本人','value':'ja'},
                {'label':'仿法国人','value':'fr'},
                {'label':'仿德国人','value':'de'},
                {'label':'仿俄罗斯人','value':'ru'},
            ],
            currlang: localStorage.getItem('currlang')?localStorage.getItem('currlang'):'en',
            article: '',
            reword_article: ''

        },
        watch: {
            currlang:{
                handler:function (newVal,oldVal) {
                    localStorage.setItem('currlang',newVal);
                    console.log(localStorage.getItem('currlang'));
                }
            }
        },
        mounted() {
            var t1=document.querySelector('#txt1 textarea');
            t1.addEventListener('scroll', this.txt1Scroll)
        },
        methods: {
            itemSearchClick() {
                this.reword_article= '';
                var article = this.article;
                var d1 = {
                    'word': article,'lang': this.currlang
                };
                var url = '{$mipInfo.domain}/article/ApiAdminArticle/ajax_reword';
                this.$mip.ajax(url, d1).then(res => {
                    if (res.code == 1) {
                        this.reword_article = res.data;
                    }
                });
            },
            clearContent(){
              this.article='';
              this.reword_article='';
            },
            txt1Scroll(){
                var t1=document.querySelector('#txt1 textarea');
                var t2=document.querySelector('#txt2 textarea');

                t2.scrollTop = t1.scrollTop;
            },
            chglang(){
               console.log('changed');
            }
        }
    })
</script>
{/block}